<template>
  <div class="store-list-container">
    <div
      class="table-top-container"
      style="margin-bottom:20px"
    />
    <div class="table-list">
      <el-table
        :data="listData"
        header-cell-class-name="table-header"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="date"
          label="产品名称"
        />
        <el-table-column
          prop="name"
          label="批准文号"
        />
        <el-table-column
          label="包装规格"
          prop="address"
        />
        <el-table-column
          prop="name"
          label="上月结余库存"
        />
        <el-table-column
          prop="name"
          label="本月发货量"
        />
        <el-table-column
          prop="name"
          label="当前库存"
        />
        <el-table-column
          prop="name"
          label="允许最大库存上限"
        />
      </el-table>
    </div>
  </div>
</template>

<script>
import {defineComponent, reactive, toRefs} from 'vue'

export default defineComponent({
  setup(props, context) {
    var reactiveData = reactive({
      listData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ],
    })

    return {
      ...toRefs(reactiveData),
    }
  },
})
</script>

